<template>
  <!-- 参与结果组件 -->
  <div class="vy-cmp-result-list">
    <div class="vy-cmp-result-list-container">
      <div class="vy-cmp-result-list-form">
        <a-row>
          <a-col :span="20">
            <a-icon type="exclamation-circle" style="color: #3366FF" />
            <span style="padding-left:10px; color:#BAB7B7;"
              >友情提示：若打卡尚未结束，请刷新页面查看最新数据</span
            >
          </a-col>
          <a-col :span="4" style="text-align:right;">
            <a-button
              type="link"
              icon="sync"
              style="color: #3366FF"
              @click="click_refresh"
              >刷新</a-button
            >
          </a-col>
        </a-row>
        <a-row style="text-align:center;">
          <a-col :span="6">
            <div class="vy-result-status s1">
              <div>全部</div>
              <div>{{ nums.totalNum }}</div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="vy-result-status s2">
              <div>已完成</div>
              <div>{{ nums.completedNum }}</div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="vy-result-status s3">
              <div>逾期完成</div>
              <div>{{ nums.overdueNum }}</div>
            </div>
          </a-col>
          <a-col :span="6">
            <div class="vy-result-status s4">
              <div>未完成</div>
              <div>{{ nums.notFinishedNum }}</div>
            </div>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="16">
            <a-button
              icon="download"
              style="color: #3366FF; border-color:#3366FF;"
              @click="click_export_result"
              >导出结果</a-button
            >
          </a-col>
          <a-col :span="8" style="text-align:right;">
            <a-input v-model="name">
              <a-icon
                slot="addonAfter"
                type="search"
                style="color: #3366FF"
                @click="click_search"
              />
            </a-input>
          </a-col>
        </a-row>
        <a-row>
          <a-table
            :columns="columns"
            :dataSource="tableData"
            :row-key="(record) => record.number"
            :pagination="pagination"
            :loading="loading"
            @change="handleTableChange"
          >
            <span slot="number" slot-scope="item">
              {{ (pagination.current - 1) * pagination.pageSize + item.number }}
              <!-- {{ item.number }} -->
            </span>
            <mu-flex
              justify-content="center"
              align-items="center"
              slot="name"
              slot-scope="item"
            >
              <mu-avatar size="30" style="margin-right:10px;">
                <img :src="baseImgUrl + item.cover" />
              </mu-avatar>
              <span>{{ item.name }}</span>
            </mu-flex>
            <!-- <a
              slot="action"
              slot-scope="item"
              href="javascript:;"
              @click="click_detail(item)"
              >详情</a
            > -->
          </a-table>
        </a-row>
      </div>
    </div>
  </div>
</template>

<script>
const columns = [
  {
    title: "序号",
    dataIndex: "",
    scopedSlots: { customRender: "number" },
  },
  {
    title: "学员",
    className: "column-name",
    dataIndex: "",
    scopedSlots: { customRender: "name" },
  },
  {
    title: "分组",
    dataIndex: "groupName",
  },
  {
    title: "状态",
    dataIndex: "state",
  },
  {
    title: "提交时间",
    dataIndex: "subTime",
  },
  {
    title: "被赞",
    dataIndex: "praiseNum",
  },
  {
    title: "被评论",
    dataIndex: "commentNum",
  },
  // {
  //   title: "操作",
  //   dataIndex: "",
  //   scopedSlots: { customRender: "action" },
  // },
];
export default {
  name: "vy-cmp-result-list",
  props: ["leftActivedTab", "projectId"],
  data() {
    return {
      nums: {
        totalNum: 0, // 全部
        completedNum: 0, // 已完成
        overdueNum: 0, // 逾期完成
        notFinishedNum: 0, // 未完成
      },
      columns, // 表格头部数据
      tableData: [], // 表格内容数据
      pagination: {}, // 分页数据
      loading: false, // 页面是否加载中, loading 效果
      name: "", // 搜索条件
      baseImgUrl: "http://image.xuexiwangzhe.com/",
    };
  },
  methods: {
    handleTableChange(pagination, filters, sorter) {
      this.queryResults(pagination);
    },
    // 查询主题结果列表
    queryResults(pagination = null) {
      if (pagination) {
        const pager = { ...this.pagination };
        pager.current = pagination.current;
        pager.pageSize = pagination.pageSize;
        this.pagination = pager;
      }
      this.loading = true;

      let params = {
        id: this.leftActivedTab.itemId, // 组件Id
        moduleId: this.leftActivedTab.id, // 主题Id
        moduleType: this.leftActivedTab.type, // 组件类型
        projectId: this.projectId, // 项目Id
        name: this.name || "", // 搜索条件
        page: this.pagination.current, // 分页，页码从1开始
        size: this.pagination.pageSize, // 每一页大小
      };
      this.$axios.get("/subassembly/getResult", { params }).then(
        (res) => {
          if (res.success) {
            this.queryResults_success(res);
          } else {
            this.queryResults_fail(res.msg);
          }
        },
        (err) => {
          this.queryResults_fail(err.message);
        }
      );
    },
    // 查询主题结果列表 - 成功
    queryResults_success(res) {
      let _result = res.subassemblyResultVo || {};

      this.nums.totalNum = _result.totalNum;
      this.nums.completedNum = _result.completedNum;
      this.nums.overdueNum = _result.overdueNum;
      this.nums.notFinishedNum = _result.notFinishedNum;

      let _table_data = (_result.results && _result.results.content) || [];
      // 展示表格内容
      this.tableData = _table_data;

      let _total = (_result.results && _result.results.totalElements) || 0;
      // 记录总数
      this.$set(this.pagination, "total", +_total);
      this.loading = false;
    },
    // 查询主题结果列表 - 失败
    queryResults_fail(_msg) {
      this.$message.error(_msg || "请求主题结果列表失败，请稍后再试");
      Object.keys(this.nums).forEach((key) => {
        this.nums[key] = "";
      });
      this.loading = false;
      this.tableData = []; // 清空表格数据
    },
    click_refresh() {
      this.queryResults();
    },
    click_search() {
      this.queryResults();
    },
    click_detail(item) {
      // 展示详情信息
      console.log("展示详情信息", item);
    },
    // 导出结果
    click_export_result() {
      let params = {
        id: this.leftActivedTab.itemId, // 组件Id
        moduleId: this.leftActivedTab.id, // 主题Id
        moduleType: this.leftActivedTab.type, // 组件类型
        projectId: this.projectId, // 项目Id
        name: this.name || "", // 搜索条件
        SESSIONKEY: sessionStorage.getItem("SESSIONKEY"),
      };

      let urlpath =
        "https://minitool.xuexiwangzhe.com/miniapp/subassembly/download";
      let urlpms = new URLSearchParams(params);
      let url = urlpath + "?" + urlpms.toString();
      location.href = url;
    },
  },
};
</script>

<style type="text/css" lang="scss">
.vy-cmp-result-list {
  width: 100%;
  height: 100%;
  background: #ffffff;
  padding: 10px 30px;
  .vy-cmp-result-list-container {
    .ant-row {
      padding: 10px 0px;
    }
    .vy-cmp-result-list-form {
      .vy-result-status {
        padding: 20px 0;
        margin: 0 10px;
        border-radius: 8px;
        > div {
          padding: 2.5px 0px;
        }
        &.s1 {
          background: rgba(245, 254, 238, 1);
        }
        &.s2 {
          background: rgba(230, 247, 254, 1);
        }
        &.s3 {
          background: rgba(255, 251, 230, 1);
        }
        &.s4 {
          background: rgba(253, 242, 241, 1);
        }
      }

      .ant-table {
        .ant-table-thead > tr > th {
          background: #eef4ff;
          text-align: center;
        }
        .ant-table-tbody > tr > td {
          text-align: center;
        }
      }
    }
  }
}
</style>
